<template>
  <div id="app">

    <!--左侧树形菜单-->
<!--    <el-tree :data="data"-->
<!--                  :props="defaultProps"-->
<!--                  default-expand-all-->
<!--                  @node-click="handleNodeClick">-->
<!--        </el-tree>-->
    <el-scrollbar>
    <el-menu
      :unique-opened="true"
      class="el-menu-vertical-demo"
      background-color="#4a6c8c"
      text-color="#fff"
      active-text-color="#fc5531"
    >
      <el-submenu
        :index="treeNode.menuId + ''"
        :key="treeNode.menuId"
        v-for="treeNode in data"
      >
        <template slot="title">
          <i :class="treeNode.icon"></i>
          <span>{{ treeNode.menuName }}</span>
        </template>
        <el-menu-item
          :index="sub.menuId + ''"
          :key="sub.menuId"
          @click="handleNodeClick(sub)"
          v-for="sub in treeNode.children"
        >
          <i :class="sub.icon"></i>
          <span slot="title"
            ><a
              style="color: white; text-decoration: none"

              >{{ sub.menuName }}</a
            ></span
          >
        </el-menu-item>
      </el-submenu>
    </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {},
  data() {
    return {
      //el-tree 的数据
      data: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  created: function () {
    this.queryTreeDate();
  },
  methods: {
    //初始化查询左侧树
    async queryTreeDate(){
      let {data} = await this.$http
        .get("/system/api/menu/findAllMenu");
      //指定请求的url及参数  get
      if (data.code==2000){
        this.data = data.data;
        //console.log(data);
      }
    },
    //绑定点击事件
    handleNodeClick(data) {
      //console.log(data);
      //console.log(JSON.stringify(data));
      if (
        data.url != null &&
        data.url != "" &&
        data.url != "null" &&
        data.url != "undefined"
      ) {
        //当点击左侧菜单时，添加页签
        //alert(data.label+','+data.url);
        //编程式路由
        this.$router.push(data.url);
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #app{
    width:100% ;
    height: 840px;
  }
</style>
